import React, { Component } from 'react'
import axios from 'axios';
import app from './App.module.css';
export default class App extends Component {
    state={
        step:'noResult',
        data:[]
    }
    search = () => {
        const { inputValue:{value} } = this
        if(value.trim() === '')  return alert('请输入内容')
        this.setState({step:'loading'})
        axios.get(`/api1/search/users?q=${value}`).then((res) => {
            console.log('请求结果',res);
            this.setState({
                step:'result',
                data:res.data.items
            })
         }).catch((error) => { window.confirm('失败了') })
    }
    goGithub = (e) => {
        console.log(e);
    }
  render() {
    const { step,data } = this.state
    return (
      <div style={{padding:'50px 0 0 200px'}}>
        <div className={app.header}>
            <h2>Search Github Users</h2>
            <input type="text" ref={e=>this.inputValue = e} placeholder='enter the name you search' /><button onClick={this.search}>Search</button>
        </div>
        <div className={app.body}>
            <h1 style={{display:step==='noResult'?'block':'none'}}>Enter name to search</h1>
            <h5 style={{display:step==='loading'?'block':'none'}}>Loading result</h5>
            <div  style={{display:step==='result'?'block':'none'}} >
                <div className={app.container}>
                {
                    data.map(i=>{
                        return <a key={i.id} href={i.html_url}>
                                <div  onClick={this.goGithub(i)} className={app.item}>
                                <div className={app.itemAvatar}>
                                    <img className={app.avatarStyle} src={i.avatar_url} alt="" />
                                </div>
                                <div className={app.userName}>{i.login}</div>
                            </div>
                        </a>
                        
                    })
                }
                </div>
            </div>
        </div>
      </div>
    )
  }
}
